<template>
    <div id="adminGameList" style="width: 100%;height: 100%;background-color: var(--theme-bgColor-aside-nav)">
      <update-info class="updateBox updateInfo" :gameInfo="gameInfo"/>
      <el-container>
        <el-main style="height: 100%;padding: 0">
          <el-table
            :data="gameTable"
            stripe
            height="100vh"
            style="width: 100%;overflow-y: auto"
            :row-style="tableRowStyle">
            <el-table-column prop="gameImg" label="游戏海报" width="170px">
              <template slot-scope="scope">
                <el-popover placement="top-start" title="" trigger="hover">
                  <img :src="scope.row.gameImg" alt="" style="width: 170px;height: 238px">
                  <img slot="reference" :src="scope.row.gameImg" style="width: 35px;height: 49px">
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="gameId" label="游戏ID" width="70px">
            </el-table-column>
            <el-table-column prop="gameName" label="游戏名" width="200px">
            </el-table-column>
            <el-table-column prop="gameTags" label="标签" width="100px">
            </el-table-column>
            <el-table-column prop="gameFollower" label="关注人数">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作">
              <template slot-scope="scope">
                <el-button @click="updateGame(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="deleteGame_(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </div>
</template>

<script>
  import api from "../../model/api";
  import updateInfo from "./updateInfo";
  import $ from "jquery";
  export default {
    name:'adminGameList',
    data() {
      return {
        gameTable:[],
        gameInfo:{},
        showUpdate:false,
      }
    },
    components:{
      updateInfo,
    },
    created() {
      this.getGameList()
    },
    methods:{
      getGameList(){
        api.getGames().then(res => {
          this.gameTable = res.data
        })
      },
      tableRowStyle({ row, rowIndex }) {
        return 'background-color: #F7F6Fd;'
      },
      // 修改table header的背景色
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background-color: lightblue;color: #303133;font-weight: 500;font-size: 20px;' //font-size: 20px;为字体大小设置
        }
      },
    async deleteGame_(val){
      this.$confirm('是否删除该游戏?', '谨慎操作', {confirmButtonText: '确定',cancelButtonText: '取消', type: 'warning'}).then(()=>{
        this.deleteGame(val.gameId)
      }).catch(()=>{
      })
    },
      async deleteGame(gameId){
        const {data:res} = await this.$axios.post('v1/deleteGame',{gameId:gameId})
        if(res.code === 200){
          this.$message.success('删除成功')
          this.getGameList()
        }
      },
      updateGame(val){
        // console.log("updateGame")
        this.gameInfo = val
        $('.updateInfo').css('display','block')
      }
    }
  };
</script>

<style lang="less" scoped>


</style>
